<template>
  <el-select v-model="irCurve" size="small" placeholder="请选择曲线"
             filterable clearable remote
             :style="{width: '100%'}"
             :remote-method="queryIrCurve"
             @change="irCurveChange"
             @click.native="irCurveSelect"
             :loading="loading">
    <el-option
      v-for="item in irCurveList"
      :key="item.ircCode"
      :label="item.ircName"
      :value="item.ircCode"
      :disabled="item.disabled"
    />
  </el-select>

</template>
<script>
import {getIrCurveList} from "@/api/calc/otcOption/calc";

export default {
  model: {
    prop: 'selectedIrCurve', // 默认值value，如果props中用value接收来自父组件的v-model值，那么这里可以不写prop
    event: 'irCurveChange' // 默认值input事件，如果$emit触发input事件，那么这里可以不写event
  },
  props: {
    irCurveList: Array,
    selectedIrCurve: String // model.prop为selectedYear，这里就用selectedYear接收，默认是'value'
  },
  watch: {
    irCurve: {
      handler(newVal) {
        this.$emit('irCurveChange', newVal)
      }
    }
  },
  data() {
    return {
      irCurve: this.selectedIrCurve,
      irCurveList: []
    }
  },
  created() {

  },
  methods: {
    queryIrCurve(query) {
      this.getIrCurveList(query);
    },
    irCurveChange(query) {
      this.irCurve = query;
      this.$emit('on-select', query)
    },
    irCurveSelect(query) {
      this.getIrCurveList(query);
    },
    /** 查询列表 */
    getIrCurveList(query) {
      var param = {};
      if (query.length > 1) {
        param.condition = query;
        getIrCurveList(param).then(response => {
          this.irCurveList = response.list;
        });
      }
    },
  },
}
</script>
